<template>
    <div>
        <div class="table-title">
            <h3>教师信息表</h3>
        </div>
        <div class="user-show">
            <div class="user-table">
                <div class="user-table-utils">
                    <div>
                        <el-input placeholder="请输入查询内容" v-model="searchContent" class="input-with-select">
                            <el-select v-model="searchItem" slot="prepend" placeholder="请选择查询项">
                                <el-option v-for="item in searchItems" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                            <el-button slot="append" icon="el-icon-search" @click="handleSearch" />
                        </el-input>
                    </div>
                </div>
                <el-table :data="tableData" border style="width: 100%" v-loading="tableLoading">
                    <el-table-column prop="workId" label="工号">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="username" label="用户名">
                    </el-table-column>
                    <el-table-column prop="college" label="学院">
                    </el-table-column>
                </el-table>
                <div class="user-pagination">
                    <el-pagination background small layout="prev, pager, next" :total="pagination.total"
                        :page-size="pagination.pageSize" :current-page="pagination.current"
                        @current-change="handleCurrentChange" />
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import apis from '@/utils/api';
import request from '@/utils/requestMethod';
import './style.less';
import ifAdmin from '@/utils/judgeAdmin';
import { Message } from 'element-ui';
export default {
    name: 'teacherInfo',
    mounted() {
        this.getTeacherInfo();
        this.userRole = ifAdmin();
    },
    data() {
        return {
            tableLoading: false,
            tableData: [],
            userRole: false,
            searchItem: '',
            searchItems: [
                {
                    label: '全部',
                    value: 'all'
                },
                {
                    label: '工号',
                    value: 'workId'
                },
                {
                    label: '姓名',
                    value: 'name'
                },
                {
                    label: '用户名',
                    value: 'username'
                },
                {
                    label: '学院',
                    value: 'college'
                }
            ],
            searchContent: '',
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0
            }
        }
    },
    methods: {
        /**
         * 获取用户信息
         */
        getTeacherInfo() {
            this.tableLoading = true;
            const {
                pagination: {
                    current,
                    pageSize
                }
            } = this;

            const body = {
                current,
                pageSize
            }

            request(apis.fetchTeacherInfo, {
                method: 'POST',
                body
            }).then(res => {
                const {
                    objects,
                    total
                } = res.data;

                this.pagination.total = total;
                this.tableData = objects;
            }).finally(() => {
                this.tableLoading = false;
            }).catch(() => {
                this.tableLoading = false;
            });
        },
        /**
         * 处理翻页事件
         */
        handleCurrentChange(value) {
            this.pagination.current = value;
            if (this.ifSearch) {
                this.handleSearch();
            } else {
                this.getTeacherInfo();
            }
        },
        handleClose(done) {
            done();
        },

        /**
         *  处理搜索事件
         */
        handleSearch() {
            this.ifSearch = true;
            const {
                searchItem,
                searchContent,
                pagination: {
                    current,
                    pageSize
                }
            } = this;

            if (searchItem === 'all') {
                this.getTeacherInfo();
                this.searchContent = '';
                this.searchItem = '';
                this.ifSearch = false;
            } else {
                if (searchItem === '') {
                    Message.warning('请输入搜索项');
                }
                if (searchContent === '') {
                    Message.warning('请输入搜索内容');
                }
            }

            if (searchContent !== '' && searchItem !== '' && searchItem !== 'all') {
                const content = searchContent;
                const body = {
                    searchItem,
                    content,
                    current,
                    pageSize
                }
                this.tableLoading = true;
                request(apis.searchTeacher, {
                    method: 'POST',
                    body
                }).then(res => {
                    const {
                        objects,
                        message,
                        total
                    } = res.data;

                    this.pagination.total = total;
                    this.tableData = objects;
                    Message.success(message);

                }).finally(() => {
                    this.tableLoading = false;
                }).catch(() => {
                    this.tableLoading = false;
                    Message.error('搜索失败');
                })
            }
        }
    }
}
</script>